<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>一般元素</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            徽章&标签
                        </div>
                        <div class="panel-body">
                            <p>
                                徽章样式
                                <code>.badge</code>
                            </p>
                            <p>
                                通过不同的class改变颜色样式
                                <code>.badge-primary</code>
                                <code>.badge-success</code>
                                <code>.badge-info</code>
                                <code>.badge-warning</code>
                                <code>.badge-danger</code>
                                <code>.badge-black</code>
                            </p>
                            <p>
                                <span class="badge">1</span>
                                <span class="badge badge-primary">2</span>
                                <span class="badge badge-success">3</span>
                                <span class="badge badge-info">4</span>
                                <span class="badge badge-warning">5</span>
                                <span class="badge badge-danger">6</span>
                                <span class="badge badge-black">7</span>
                            </p>
                            <p>
                                <a href="#">收件箱 <span class="badge">42</span></a>
                            </p>
                            <p>
                                <button class="btn btn-primary" type="button">
                                    已读邮件 <span class="badge">4</span>
                                </button>
                                <button class="btn btn-warning" type="button">
                                    未读邮件 <span class="badge">12</span>
                                </button>
                                <button class="btn btn-danger" type="button">
                                    删除邮件 <span class="badge">6</span>
                                </button>
                            </p>
                            <p>
                                标签样式
                                <code>.label</code>
                            </p>
                            <p>
                                通过不同的class改变颜色样式
                                <code>.label-default</code>
                                <code>.label-primary</code>
                                <code>.label-success</code>
                                <code>.label-info</code>
                                <code>.label-warning</code>
                                <code>.label-danger</code>
                                <code>.label-black</code>
                            </p>
                            <p>
                                <span class="label label-default">default</span>
                                <span class="label label-primary">primary</span>
                                <span class="label label-success">success</span>
                                <span class="label label-info">info</span>
                                <span class="label label-warning">warning</span>
                                <span class="label label-danger">danger</span>
                                <span class="label label-black">black</span>
                            </p>
                            <p>
                                描边标签<code>.label-outline</code>
                            </p>
                            <p>
                                <span class="label label-default label-outline">default</span>
                                <span class="label label-primary label-outline">primary</span>
                                <span class="label label-success label-outline">success</span>
                                <span class="label label-info label-outline">info</span>
                                <span class="label label-warning label-outline">warning</span>
                                <span class="label label-danger label-outline">danger</span>
                                <span class="label label-black label-outline">black</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            提示和弹出提示
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        提示<code>tooltip</code>
                                    </p>
                                    <p>
                                        <button data-placement="top" data-toggle="tooltip" class="btn btn-default"
                                            type="button" data-original-title="上显示提示">上显示提示</button>
                                        <button data-placement="right" data-toggle="tooltip" class="btn btn-default"
                                            type="button" data-original-title="右显示提示">右显示提示</button>
                                        <button data-placement="bottom" data-toggle="tooltip" class="btn btn-default"
                                            type="button" data-original-title="下显示提示">下显示提示</button>
                                        <button data-placement="left" data-toggle="tooltip" class="btn btn-default"
                                            type="button" data-original-title="左显示提示">左显示提示</button>
                                    </p>
                                    <p>
                                        鼠标点击显示提示
                                        <code>data-trigger="click"</code>
                                    </p>
                                    <p>
                                        <button data-placement="top" data-toggle="tooltip" data-trigger="click"
                                            class="btn btn-default" type="button"
                                            data-original-title="上显示提示">上显示提示</button>
                                        <button data-placement="right" data-toggle="tooltip" data-trigger="click"
                                            class="btn btn-default" type="button"
                                            data-original-title="右显示提示">右显示提示</button>
                                        <button data-placement="bottom" data-toggle="tooltip" data-trigger="click"
                                            class="btn btn-default" type="button"
                                            data-original-title="下显示提示">下显示提示</button>
                                        <button data-placement="left" data-toggle="tooltip" data-trigger="click"
                                            class="btn btn-default" type="button"
                                            data-original-title="左显示提示">左显示提示</button>
                                    </p>
                                    <p>
                                        应用场景
                                    </p>
                                    <p>
                                        <button data-placement="right" data-toggle="tooltip" class="btn  btn-success"
                                            type="button" data-original-title="这是一个按钮提示">按钮提示</button>
                                    </p>
                                    <p>
                                        <a href="javascript:;" class="btn-link" data-placement="right"
                                            data-toggle="tooltip" data-original-title="这是一个链接提示">链接提示</a>
                                    </p>
                                    <p>
                                        <span data-placement="right" data-toggle="tooltip"
                                            data-original-title="这是一个文字提示">文字提示</s>
                                    </p>
                                </div>
                                <div class="col-md-6">

                                    <p>
                                        弹出框<code>popover</code>
                                    </p>
                                    <p>
                                        <button type="button" class="btn  btn-default " data-placement="right"
                                            data-toggle="popover" title="弹出框标题" data-content="弹出框内容演示">右弹出框</button>
                                        <button type="button" class="btn  btn-primary" data-placement="top"
                                            data-toggle="popover" title="弹出框标题" data-content="弹出框内容演示">上弹出框</button>
                                        <button type="button" class="btn  btn-success" data-placement="bottom"
                                            data-toggle="popover" title="弹出框标题" data-content="弹出框内容演示">下弹出框</button>
                                        <button type="button" class="btn  btn-warning" data-placement="left"
                                            data-toggle="popover" title="弹出框标题" data-content="弹出框内容演示">左弹出框</button>
                                    <p>鼠标点击显示</p>
                                    <p>
                                        <button type="button" class="btn  btn-default" data-placement="right"
                                            data-trigger="focus" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">右弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="top"
                                            data-trigger="focus" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">上弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="bottom"
                                            data-trigger="focus" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">下弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="left"
                                            data-trigger="focus" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">左弹出框</button>
                                    </p>
                                    <p>鼠标经过显示</p>
                                    <p>
                                        <button type="button" class="btn  btn-default" data-placement="right"
                                            data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">右弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="top"
                                            data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">上弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="bottom"
                                            data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">下弹出框</button>
                                        <button type="button" class="btn  btn-default" data-placement="left"
                                            data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                            data-content="弹出框内容演示">左弹出框</button>
                                    </p>
                                    <p>弹出标题颜色</p>
                                    <button type="button" class="btn  btn-primary popover-primary"
                                        data-placement="right" data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                        data-content="弹出框内容演示">重要</button>
                                    <button type="button" class="btn  btn-success popover-success"
                                        data-placement="right" data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                        data-content="弹出框内容演示">成功</button>
                                    <button type="button" class="btn  btn-info popover-info" data-placement="right"
                                        data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                        data-content="弹出框内容演示">信息</button>
                                    <button type="button" class="btn  btn-warning popover-warning"
                                        data-placement="right" data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                        data-content="弹出框内容演示">警告</button>
                                    <button type="button" class="btn  btn-danger popover-danger" data-placement="right"
                                        data-trigger="hover" data-toggle="popover" title="弹出框标题"
                                        data-content="弹出框内容演示">危险</button>
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            面包屑导航
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        面包屑<code>.breadcrumb</code>
                                    </p>
                                    <ol class="breadcrumb">
                                        <li><a href="#">首页</a></li>
                                        <li><a href="#">系统设置</a></li>
                                        <li class="active">数据字典</li>
                                    </ol>
                                </div>
                                <div class="col-md-6">
                                    <p>
                                        灰色背景<code>.breadcrumb-gray</code>
                                    </p>
                                    <ol class="breadcrumb breadcrumb-gray">
                                        <li><a href="#">首页</a></li>
                                        <li><a href="#">系统设置</a></li>
                                        <li class="active">数据字典</li>
                                    </ol>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <p>
                                        箭头符号<code>.breadcrumb-arrow</code>
                                    </p>
                                    <ol class="breadcrumb breadcrumb-arrow">
                                        <li><a href="#">首页</a></li>
                                        <li><a href="#">系统设置</a></li>
                                        <li class="active">数据字典</li>
                                    </ol>
                                </div>
                                <div class="col-md-6">
                                    <p>
                                        灰色背景<code>.breadcrumb-gray</code>
                                    </p>
                                    <ol class="breadcrumb breadcrumb-gray breadcrumb-arrow">
                                        <li><a href="#">首页</a></li>
                                        <li><a href="#">系统设置</a></li>
                                        <li class="active">数据字典</li>
                                    </ol>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            折叠隐藏
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <p>
                                        链接&按钮
                                    </p>
                                    <p>
                                        <a class="btn btn-primary" data-toggle="collapse" href="#collapse1">
                                            七律·洪都
                                        </a>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse"
                                            data-target="#collapse1">
                                            七律·洪都
                                        </button>
                                    </p>
                                    <p>
                                    <div class="collapse" id="collapse1">
                                        <div class="well">
                                            到得洪都又一年，祖生击楫至今传。闻鸡久听南天雨，立马曾挥北地鞭。鬓雪飞来成废料，彩云长在有新天。年年后浪推前浪，江草江花处处鲜。
                                        </div>
                                    </div>
                                    </p>
                                    <p>手风琴风格面板折叠</p>
                                    <div class="panel-group" id="accordion">
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                        href="#collapse11">
                                                        一、项目开始阶段
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse11" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    项目开始阶段内容描述
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                        href="#collapse12">
                                                        二、项目进行阶段
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse12" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    项目进行阶段内容描述
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-warning">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a role="button" data-toggle="collapse" data-parent="#accordion"
                                                        href="#collapse13">
                                                        三、项目结束阶段
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse13" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    项目结束阶段内容描述
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <p>
                                        列表组面板折叠
                                    </p>
                                    <div class="panel-group">
                                        <div class="panel panel-danger">
                                            <div class="panel-heading" id="collapseListGroupHeading1">
                                                <h4 class="panel-title">
                                                    <a class="collapsed" data-toggle="collapse"
                                                        href="#collapseListGroup1">
                                                        待办管理
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseListGroup1" class="panel-collapse collapse">
                                                <ul class="list-group">
                                                    <li class="list-group-item">待办任务</li>
                                                    <li class="list-group-item">已办任务</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            轮播图
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner" role="listbox">
                                            <div class="item active">
                                                <img src="/static/img/banner/1.jpg">
                                                <div class="carousel-caption">
                                                    内容一
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="/static/img/banner/2.jpg">
                                                <div class="carousel-caption">
                                                    内容二
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner" role="listbox">
                                            <div class="item active">
                                                <img src="/static/img/banner/3.jpg">
                                                <div class="carousel-caption">
                                                    内容一
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="/static/img/banner/4.jpg">
                                                <div class="carousel-caption">
                                                    内容二
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Controls -->
                                        <a class="left carousel-control" href="#carousel-example-generic1"
                                            data-slide="prev">
                                            <span class="icon-prev fa fa-angle-left"></span>
                                            <span class="sr-only">上一页</span>
                                        </a>
                                        <a class="right carousel-control" href="#carousel-example-generic1"
                                            data-slide="next">
                                            <span class="icon-next fa fa-angle-right"></span>
                                            <span class="sr-only">下一页</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                                        <!-- Indicators -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#carousel-example-generic2" data-slide-to="0"
                                                class="active"></li>
                                            <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                                        </ol>

                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner" role="listbox">
                                            <div class="item active">
                                                <img src="/static/img/banner/5.jpg">
                                                <div class="carousel-caption">
                                                    内容一
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="/static/img/banner/1.jpg">
                                                <div class="carousel-caption">
                                                    内容二
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Controls -->
                                        <a class="left carousel-control" href="#carousel-example-generic2"
                                            data-slide="prev">
                                            <span class="icon-prev fa fa-angle-left"></span>
                                            <span class="sr-only">上一页</span>
                                        </a>
                                        <a class="right carousel-control" href="#carousel-example-generic2"
                                            data-slide="next">
                                            <span class="icon-next fa fa-angle-right"></span>
                                            <span class="sr-only">下一页</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel ">
                        <div class="panel-heading">
                            缩略图
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="/static/img/banner/1.jpg">
                                    </a>
                                </div>
                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="/static/img/banner/2.jpg">
                                    </a>
                                </div>
                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="/static/img/banner/3.jpg">
                                    </a>
                                </div>
                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img src="/static/img/banner/4.jpg">
                                    </a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <img src="/static/img/banner/5.jpg">
                                        <div class="caption">
                                            <h3>标题内容</h3>
                                            <p>文字内容</p>
                                            <p><a href="#" class="btn btn-primary" role="button">按钮一</a> <a href="#"
                                                    class="btn btn-default" role="button">按钮二</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <img src="/static/img/banner/4.jpg">
                                        <div class="caption">
                                            <h3>标题内容</h3>
                                            <p>文字内容</p>
                                            <p><a href="#" class="btn btn-primary" role="button">按钮一</a> <a href="#"
                                                    class="btn btn-default" role="button">按钮二</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <img src="/static/img/banner/3.jpg">
                                        <div class="caption">
                                            <h3>标题内容</h3>
                                            <p>文字内容</p>
                                            <p><a href="#" class="btn btn-primary" role="button">按钮一</a> <a href="#"
                                                    class="btn btn-default" role="button">按钮二</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            well容器
                        </div>
                        <div class="panel-body">
                            <div class="well  well-lg">
                                <h4>大号样式</h4>
                                使用<code>well-lg</code>实现大号的well样式。
                            </div>
                            <div class="well well-success">
                                <h4>默认大小</h4>
                                这是默认大小。通过well-primary等样式来实现背景颜色。
                            </div>

                            <div class="well well-sm">
                                <h4>小号样式</h4>
                                使用<code>well-sm</code>实现小号的well样式。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>